<template>
  <div class="appp and">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" :time="time" />
        </div>
        <a-row>
          <a-col :span="16">
            <div class="left">
              <dv-border-box-11
                class="border11"
                title="异常呼叫信息"
                :color="['#f1d90b', 'rgba(241, 217,11, 0.3)']"
                backgroundColor="rgba(8, 18,67, 0.7)"
              >
                <dv-scroll-board
                  :config="config1"
                  class="table"
                  style="height:84vh"
                />
              </dv-border-box-11>
            </div>
          </a-col>
          <a-col :span="8">
            <!--122794    rgba(18, 39,148, 0.3)  -->
            <div class="right">
              <dv-border-box-11
                class="border11"
                title="今日已解决"
                :color="['#0dde79', 'rgba(13, 222,121, 0.3)']"
                backgroundColor="rgba(8, 18,67, 0.6)"
              >
                <dv-scroll-board
                  :config="config2"
                  class="table"
                  style="height:84vh"
                />
              </dv-border-box-11>
            </div>
          </a-col>
        </a-row>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/ad/ToHead.vue'
import { sysQuery } from './api/dataApi'
export default {
  name: 'App',
  components: {
    ToHead,
  },
  data() {
    return {
      title: '制造一部安灯报警',
      bjData: [],
      pageIndex: 0,
      eqname: '',
      timeInterval: null,
      eqPageList: [],
      config1: null,
      dataList1: [],
      dataList2: [],
      wcname: '',
      config2: null,
      vw: 0,
    }
  },
  created() {
    this.getData()
    this.getData2()
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  watch: {
    dataList1(newData) {
      this.config1 = {
        header: [
          '产线',
          '报警类别',
          '呼叫时间',
          '响应时间(分)',
          '响应人',
          '持续时长(分)',
        ],
        headerHeight: this.vw > 1912 ? 18 : 24,
        data: newData,
        index: false,
        columnWidth: [120, 150, 240, 240, 120, 130],
        align: ['left'],
        headerBGC: '#06144f',
        // oddRowBGC: '#06144f',
        oddRowBGC: 'rgba(52,99,171,0.15)',
        // evenRowBGC: '#15235c',
        evenRowBGC: '',
        waitTime: '3000',
        rowNum: 20,
      }
    },
    dataList2(newData) {
      this.config2 = {
        header: ['响应时间(分)', '确认时间', '产线', '报警类别'],
        headerHeight: this.vw > 1912 ? 18 : 24,
        data: newData,
        index: false,
        columnWidth: [200, 200, 130, 130],
        align: ['left'],
        headerBGC: '#06144f',
        // headerBGC: '#06144f',
        // oddRowBGC: '#06144f',
        oddRowBGC: 'rgba(52,99,171,0.15)',
        // evenRowBGC: '#15235c',
        evenRowBGC: '',
        waitTime: '3000',
        rowNum: 20,
      }
    },
  },

  mounted() {
    this.timeInterval = setInterval(() => {
      this.getData()
      this.getData2()
    }, 1000 * 60 * 5)
    this.title = this.$route.query.title
    this.vw =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_device_management_ad_left'
      header['wc_code'] = this.$route.query.cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: JSON.stringify({
          wc_code: 'like_anywhere',
        }),
        pageIndex: -1,
      }
      sysQuery(params)
        .then((res) => {
          if (res.code == 0 && res.data && res.data.length) {
            that.wcname = res.data[0].wc_name
            that.qThree(res.data)
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((item) => {
        const _m = []
        if (item.responsetime && !item.confirmtime) {
          _m.push(`<span style="color:#f1d90b">${item.wc_name} </span>`)
          _m.push(`<span style="color:#f1d90b">${item.reasonname} </span>`)
          _m.push(`<span style="color:#f1d90b">${item.repairtime} </span>`)
          _m.push(`<span style="color:#f1d90b">${item.responsetime} </span>`)
          _m.push(`<span style="color:#f1d90b">${item.psname} </span>`)
          _m.push(`<span style="color:#f1d90b">${item.continuemin} </span>`)
        } else if (!item.responsetime) {
          _m.push(`<span style="color:#ff0000">${item.wc_name} </span>`)
          _m.push(`<span style="color:#ff0000">${item.reasonname} </span>`)
          _m.push(`<span style="color:#ff0000">${item.repairtime} </span>`)
          _m.push(`<span style="color:#ff0000">${item.responsetime} </span>`)
          _m.push(`<span style="color:#ff0000">${item.psname} </span>`)
          _m.push(`<span style="color:#ff0000">${item.continuemin} </span>`)
        } else if (item.responsetime && item.confirmtime) {
          _m.push(`<span style="color:#0dde79">${item.wc_name} </span>`)
          _m.push(`<span style="color:#0dde79">${item.reasonname} </span>`)
          _m.push(`<span style="color:#0dde79">${item.repairtime} </span>`)
          _m.push(`<span style="color:#0dde79">${item.responsetime} </span>`)
          _m.push(`<span style="color:#0dde79">${item.psname} </span>`)
          _m.push(`<span style="color:#0dde79">${item.continuemin} </span>`)
        } else {
          _m.push(item.wc_name)
          _m.push(item.reasonname)
          _m.push(item.repairtime)
          _m.push(item.responsetime)
          _m.push(item.psname)
          _m.push(item.continuemin)
        }

        _reportData.push(_m)
      })
      this.dataList1 = _reportData
    },
    getData2() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_device_management_ad_right'
      header['wc_code'] = this.$route.query.cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: JSON.stringify({
          wc_code: 'like_anywhere',
        }),
        pageIndex: -1,
      }
      sysQuery(params)
        .then((res) => {
          if (res.code == 0 && res.data && res.data.length > 0) {
            that.clData(res.data)
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    clData(reportData) {
      const _reportData = []
      reportData.forEach((item) => {
        const _m = []
        if (item.responsetime) {
          _m.push(
            `<span style="color:#0dde79">${
              item.responsetime ? item.responsetime : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#0dde79">${
              item.confirmtime ? item.confirmtime : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#0dde79">${
              item.wc_name ? item.wc_name : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#0dde79">${
              item.reasonname ? item.reasonname : '-'
            } </span>`
          )
        } else {
          _m.push(item.responsetime ? item.responsetime : '-')
          _m.push(item.confirmtime ? item.confirmtime : '-')
          _m.push(item.wc_name ? item.wc_name : '-')
          _m.push(item.reasonname ? item.reasonname : '')
        }
        _reportData.push(_m)
      })
      this.dataList2 = _reportData
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.imgList {
  height: 39vh;
  img {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(4, 62, 168, 0.3);
  }
}
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 90vh;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1vh;
  cursor: pointer;
}

.table {
  padding: 6rem 2rem 0rem 2rem;
}
.border11 {
  height: 90vh;
}

.table-bg {
  background: url('./assets/images/bk2.png');
  background-size: 100% 100%;
  height: 37vh;
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  color: #d3d3d5 !important;
}
.warrper .left ::v-deep .dv-scroll-board .header .header-item {
  color: #05f4f7 !important;
}
.warrper .right ::v-deep .dv-scroll-board .header .header-item {
  color: #05f4f7 !important;
}

.warrper ::v-deep .ant-select-selection {
  border: 1px solid #122794;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
  cursor: pointer;
}

.ant-carousel .custom-slick-arrow {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.9;
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}
.imgstyle img {
  width: 100%;
  height: 100%;
}
</style>
